<template>
	<view class="login-container">
		<tn-button backgroundColor="tn-bg-left"
			style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;"
			:border="false" @click="handleReturn">
			<text class="tn-icon-left"></text>
		</tn-button>
		<!-- Logo -->

		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>

		<!-- 表单 -->
		<view class="form">
			<view class="input-group">
				<input class="input" type="text" placeholder="请输入用户名" placeholder-class="placeholder"
					v-model="username" />
				<view class="line"></view>
			</view>
			<view class="input-group">
				<input class="input" type="password" placeholder="请输入密码" placeholder-class="placeholder"
					v-model="password" />
				<view class="line"></view>
			</view>
			<button class="login-btn" @click="handleLogin" :disabled="isSubmitting">登录</button>
		</view>

		<!-- 底部链接 -->
		<view class="footer">
			<text class="link" @click="handleRegister">注册账号</text>
			<text class="link" @click="handleForgetPassword">忘记密码</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSubmitting: false,
				username: "2055827081",
				password: "qqqqqq",
			};
		},
		methods: {
			handleReturn() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleLogin() {
				let that = this
				that.isSubmitting = true
				if (this.username && this.password) {
					uni.request({
						url: this.baseUrl + "/wx/auth/login",
						method: "POST",
						data: {
							username: that.username,
							password: that.password
						},
						success: function(res) {
							if (res.data.errno === 0) {
								uni.setStorageSync("userInfo", res.data.data.userInfo);
								uni.setStorageSync("token", res.data.data.token);
								let second = 4
								const timer = setInterval(() => {
									second--;
									uni.showToast({
										title: "登录成功将在" + second + "后跳转",
										icon: "none",
									});
									if (second === 0) {
										clearInterval(timer);
										uni.reLaunch({
											url: "/pages/Information/Information",
										});
										that.isSubmitting = false
									}
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.errmsg,
									icon: "none",
								});
								let second = 2
								const timer = setInterval(() => {
									second--;
									if (second === 0) {
										clearInterval(timer);
										that.isSubmitting = false
									}
								}, 1000);
							}

						},
						fail(e) {
							console.log(e);
						}
					})
				} else {
					uni.showToast({
						title: "请输入用户名和密码",
						icon: "none",
					});
				}
			},
			handleRegister() {
				uni.redirectTo({
					url: "/pages/Information/register/register",
				});
			},
			handleForgetPassword() {
				uni.navigateTo({
					url: "/pages/forget-password/forget-password",
				});
			},
		},
	};
</script>

<style>
	/* 页面容器 */
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 20px;
	}

	/* Logo */
	.logo {
		margin-bottom: 40px;
	}

	.logo image {
		width: 100px;
		height: 100px;
		margin-bottom: 20%;
	}

	/* 表单 */
	.form {
		width: 100%;
		max-width: 300px;
	}

	.input-group {
		margin-bottom: 20px;
	}

	.input {
		width: 100%;
		height: 40px;
		font-size: 16px;
		color: #333;
		padding: 10px 0;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.placeholder {
		color: #999;
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #e0e0e0;
	}

	/* 登录按钮 */
	.login-btn {
		width: 60%;
		height: 40px;
		background-color: #ff5000;
		color: #fff;
		font-size: 16px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		border: none;
		outline: none;
	}

	.login-btn:active {
		background-color: #e94e00;
	}

	/* 底部链接 */
	.footer {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 300px;
	}

	.link {
		color: #ff5000;
		font-size: 14px;
		text-decoration: none;
	}

	.link:active {
		opacity: 0.8;
	}
</style>